<template>
    <div>
        this is page
        <el-button-group>
            <el-button>{{person.name}}</el-button>
            <el-input v-model="iNickName"></el-input>
            <el-button>{{person.nickName}}</el-button>

            <el-input v-model="p_n"></el-input>
        </el-button-group>
        <el-button-group>
            <el-input v-model="o_personAge">
                <template slot="prepend">操作端</template>
            </el-input>
            <el-button>{{person.age}}</el-button>
            <el-button>{{p_a}}</el-button>
        </el-button-group>
        <miss-you ref="miss" :button-name="person.nickName"
                  :change-color="change" @rightClick="change">
            <el-form-item slot="header">
                <el-button type="warning">张三头</el-button>
            </el-form-item>
            <el-form-item slot="footer" slot-scope="props">
                <el-button type="warning">{{props.subName}}</el-button>
                <el-button type="warning">{{person.nickName}}</el-button>
                <el-button type="warning">{{props.left}}</el-button>
                <el-button type="warning">{{props.right}}</el-button>
                <el-button type="warning">{{JSON.stringify(props)}}</el-button>
            </el-form-item>
        </miss-you>
        <el-button-group>
            <el-button @click="maybe">父组件调用子组件方法 ref</el-button>
        </el-button-group>
    </div>
</template>

<script>
    import MissYou from '../practise/MissYou'

    export default {
        components: {
            MissYou: MissYou,
        },
        data: function () {
            return {
                person: {
                    name: '张三',
                    nickName: '小猪',
                    age: 0,
                },

                iNickName: '',
                o_personAge: 0,
            }
        },
        watch: {
            iNickName: function (n, o) {
                this.person.nickName = 'core ' + n.trim();
            },
            o_personAge: function (n, o) {
                if (isNaN(n)) {
                    this.person.age = 1000;
                    return;
                }
                let k = parseInt(n);
                this.person.age = k * 10;
            }
        },
        computed: {
            p_n: function () {
                return this.person.nickName + ' _computing'
            },
            p_a: function () {
                return '年龄是 ' + this.person.age;
            },
        },
        methods: {
            change: function (data) {
                if (data) {
                    this.$message.success('ok 子组件调用父组件需要一个桥梁' + data);
                    return;
                }
                this.$message.success('ok');
            },
            maybe:function () {
                this.$refs['miss'].picker();
            }

        },

        mounted: function () {

        },

        created: function () {

        },
        name: "P1"
    }
</script>

<style scoped>

</style>
